<template>
	<view>
		<view class="p-30">
			<u-swiper :list="banners" @change="change" showTitle keyName="image" height="200" radius="10"></u-swiper>
		</view>
		<view class="card-data">
			<view class="item">
				<view class="label">治理体系覆盖率</view>
				<view class="value">100%</view>
			</view>
			<view class="item">
				<view class="label">任务完成率</view>
				<view class="value">98%</view>
			</view>
			<view class="item">
				<view class="label">服务满意度</view>
				<view class="value">4.9/5</view>
			</view>
			<view class="item">
				<view class="label">参与群众数</view>
				<view class="value">5000人</view>
			</view>
		</view>
		<view class="menu-box">
			<u-grid :border="false" @click="click" :col="2">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" :customStyle="{height:160+'rpx'}">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [{
						image: "https://scpic2.chinaz.net/files/default/imgs/2024-11-27/620753ac03713f82_s.jpg",
						title: "党建引领，乡村振兴",
					},
					{
						image: "https://scpic2.chinaz.net/files/default/imgs/2024-11-22/f41bf29a3a2864fd_s.png",
						title: "服务民生，共建和谐",
					},
					{
						image: "https://scpic2.chinaz.net/files/default/imgs/2024-11-22/d3aba650dc0ac733_s.png",
						title: "治理有方，成果显著",
					},
				],
				 baseList: [{
				                    name: 'photo',
				                    title: '五级五长'
				                    },
				                    {
				                        name: 'lock',
				                        title: '六员服务'
				                    },
				                    {
				                        name: 'star',
				                        title: '治理成果'
				                    },
									{
									    name: 'star',
									    title: '先进事迹'
									}
				                ]
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.card-data {
		display: flex;
		flex-wrap: wrap;
		margin: 15rpx;

		.item {
			width: calc(50% - 30rpx);
			margin: 15rpx;
			border-radius: 10px;
			background-color: white;

			.label {
				padding: 20rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 28rpx;
				color: #999;
			}

			.value {
				color: #333;
				padding: 40rpx 20rpx;
				font-size: 18px;
				font-weight: 500;
			}
		}
	}
	.menu-box{
		border-radius:10px;
		background-color: white;
		width:calc(100% - 60rpx);
		margin:0 auto;
	}
</style>